<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
    <div id="app"></div>
    <div></div>

    <script id="template" type="plain/text">

        <div>

          <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
            <text x="0" y="15" fill="red">I love SVG</text>
          </svg>

          <svg style="height:0;width:0;display:none;" version="1.1" xmlns="http://www.w3.org/2000/svg"> <symbol id="icon-italy" width="150" height="100" viewBox="0 0 3 2"> <rect width="1" height="2" x="0" fill="#008d46" /> <rect width="1" height="2" x="1" fill="#ffffff" /> <rect width="1" height="2" x="2" fill="#d2232c" /> </symbol> <symbol id="icon-france" width="150" height="100" viewBox="0 0 3 2"> <rect width="1" height="2" x="0" fill="#002496" /> <rect width="1" height="2" x="1" fill="#ffffff" /> <rect width="1" height="2" x="2" fill="#ee2839" /> </symbol> </svg>

          <svg>
            <use xlink:href="#icon-france" />
          </svg>

          <svg width="400px" height="300px" viewBox="0 0 400 300"
             xmlns="http://www.w3.org/2000/svg">
            <foreignObject width="100" height="50">
                <p>Here is a paragraph that requires word wrap</p>
            </foreignObject>
            <circle cx="150" cy="50" r="50"/>
          </svg>


        </div>
    </script>
    <script src="../dist/standard/dev/yox.js"></script>
    <script>
        var instance = new Yox({
            el: '#app',
            template: '#template',
            data: {

            },
        });

    </script>
</body>
</html>
